define(['vue',"jquery","./build/template","./build/asse","./attrModel/attrtemplate",'./attrModel/artt'],function(Vue,$,template,asse,attrt){
	//先引入需要的模块部分
	//使用VUE模式
    return{
        template:new Vue({
            el: '#root',
            data: {
                "assembly":[],//原始组件数据
                "option":[],//原始组件的默认值
                "attribute":[],//将编辑区域的每个模块用时间戳封装成对象去处理，每次右侧的属性栏修改，就更新整个区域模板
            },
            methods: {
                addNode(e){
                    //增加节点
                	var itme = e.target;
                	var modules = $(itme).attr('data-type-model');
					var ells = $(".modelTpl>.layui-form-item[NodeName='"+modules+"']").length;
					if(ells>=1){
						layer.msg("该元素只允许添加一个");
						return false;
					}
                    var option = typeof(this.option)=="object"?this.option:JSON.parse(this.option);
                    var colours = option[modules];
					try{
						colours.timestamp = (new Date()).valueOf();
						colours.moudl = modules;
						var html = template(modules,colours);
						//$(".parent>form>.modelTpl").append('<div class="layui-form-item" NodeName="'+modules+'" id="'+colours.timestamp+'">'+html+'</div>');
						$(".parent>form>.modelTpl").append(
							`
								<div  class="layui-form-item" NodeName="${modules}" id="${colours.timestamp}">
									${html}
								</div>
							`
						);
						this.attribute[colours.timestamp] = colours;
						layui.form.render();
					}
					catch(err){
						layer.msg("暂无模板");
					}
					
	            },
	            updule(id){
                    //更新当前被选择的模板
	            	var html = template(vue.attribute[id].moudl,vue.attribute[id]);//获取最新数据JSON渲染新HTML
	            	$("#"+id).html(html);//写入DOM
	            	layui.form.render();//重新激活layui的form组件
            	},
                submits(){
                    console.log(vue.attribute)
                }
            },
            publickPub:{
            	input:function(_t,elnode){
                    //input框输入事件
            		var TimeId = $(_t).attr('thisid');//拿到当前的这个时间戳节点ID
            		var title = $(_t).val();//拿到最新值
            		vue.$set(vue.attribute[TimeId],elnode,title);//赋值给新的节点val
            		vue.updule(TimeId);//更新最新的内容·
            	},
            	ArrOption:function(_t,elnode,i){
                    //选项类的操作，更改选项类的值同步
            		var TimeId = $(_t).attr('thisid');
            		var val = $(_t).val();
            		var arr = new Array();
            		$(i).find('.arrSel').each(function(i,q){
            			arr.push($(q).find("input").val());
            		})
            		vue.$set(vue.attribute[TimeId],elnode,arr);
            		vue.updule(TimeId)
            	}
            },
            bindFun:{
                //选项增加
            	add:(_t)=>{
            		var TimeId = $(_t).attr('thisid');
            		vue.attribute[TimeId].select.push('未命名');
            		vue.updule(TimeId);
            		$("#"+TimeId).click();
            	},
                //删除选项
            	remove:(_t,elnode,i)=>{
            		$(_t).parents('.arrSel').remove();
            		var TimeId = $(_t).attr('thisid');
            		var val = $(_t).val();
            		var arr = new Array();
            		$(i).find('.arrSel').each(function(i,q){
            			arr.push($(q).find("input").val());
            		})
            		vue.$set(vue.attribute[TimeId],elnode,arr);
            		vue.updule(TimeId)
            	},
                //右击菜单
                meun:(nav,x,y)=>{
                    $("#Meun").remove();
                    var data = {
                        data:nav
                    };
                    var html =attrt("TemMuen",data);
                    $('body').append(html);
                    $("#Meun").css({
                        "top":y+"px",
                        "left":x+"px",
                        "display":"block"
                    })
                }
            },
            //首屏进入初始化加载
            created:function(){
            	var _this = this
                $.get("./js/assembly.json",function(data){
                    if(typeof(data)!="object"){
					   data = JSON.parse(data);//
                    }
					for (var i = 0; i <= data.assembly.length-1; i++) {
						_this.assembly.push(data.assembly[i]);
					}
				})
				$.get("./js/data.json",function(data){
					_this.option=data;
				});
                window.vue = this;
				this.$options.bindEvn();
            },
            bindEvn:function(){
                var Bnf = vue.$options.bindFun;
            	$("body").on("click",".knowSel",function(){
					var _this = $(this);
					var defText = _this.siblings("input[type='hidden']").val();
					layer.prompt({title: '输入', formType: 2,value:defText}, function(text,index){
						layer.close(index);
						_this.siblings("input[type='hidden']").val(text);
						_this.siblings("span").html(text)
					});
				});
				$("body").on("click",".modelTpl>.layui-form-item",function(){
					//var ObjEl = Object.getOwnPropertyNames(asse);
					$(this).siblings().removeClass("edit");
					$(this).addClass('edit');
					var modlName = $(this).attr('NodeName');
					var timestamp = $(this).attr('id');
					var data = vue.attribute[timestamp];
					var html = attrt("M_"+modlName,data);
					$(".attribute .attrCton").html(html);
		  			layui.form.render()
				});
                $('body').on('contextmenu','.modelTpl>.layui-form-item',function(e){
                    if(e.button == 2) {
                        e.preventDefault();
                        if($(this).hasClass("edit")){
                            $("#Meun").remove();
                            layer.msg("无法删除正在编辑的组件")
                        }else{
                            var _x = e.clientX,
                                _y = e.clientY;
                            Bnf.meun([
                                {name:"删除组件",class:'del'}
                            ],_x,_y);
                            // muenthis = $(this)
                        }
                    }
                });
            },
            watch:{
            	/*attribute:function(val, oldVal){
		            console.log(111)
		        }*/
            }
        })
    }
})